<template>
  <div class="app-container">
    <u-page title="会员发券">
      <el-form ref="dialogForm" :model="dataForm" :rules="rules" label-position="left" label-width="120px" style="margin-left: 40px">

        <div style="margin-bottom: 20px">
          <el-alert title="温馨提示" type="success" show-icon :closable="false">
            <span style="font-weight: bold; font-size: 12px;">会员发券限制单用户发送；发送类型:指定用户,支持多张优惠券；发送类型:扫码领取,限制单张优惠券。</span>
          </el-alert>
        </div>

        <el-form-item label="优惠券选择" prop="couponId">
          <ues-coupon v-model="dataForm.couponId" multiple number @change="changeCouponList" ref="uesCoupon" />
        </el-form-item>

        <el-divider />

        <el-form-item prop="oldOrderNo" label="异常订单号">
          <el-input v-model="dataForm.oldOrderNo" placeholder="请输入异常订单号" clearable maxlength="50" show-word-limit />
        </el-form-item>

        <el-form-item prop="note" label="备注">
          <el-input v-model="dataForm.note" type="textarea" placeholder="请输入备注信息" clearable maxlength="200" show-word-limit />
        </el-form-item>

        <div class="form-title">发送对象</div>

        <template>
          <el-form-item label="发送类型" prop="type">
            <el-radio-group v-model="dataForm.type">
              <el-radio :label="1">指定用户</el-radio>
              <el-radio :label="2">扫码领取</el-radio>
            </el-radio-group>
          </el-form-item>

          <template v-if="dataForm.type===1">

            <el-form-item label="指定用户" prop="memberIds">
              <ues-member v-model="dataForm.memberIds" />
            </el-form-item>

          </template>

          <template v-if="dataForm.type===2">

            <el-form-item label="扫码领取">
              <el-card v-if="qrcode" style="width: 260px; ">
                <u-qrcode :content="qrcode" width="200" height="200" />
              </el-card>
              <el-card v-else style="width: 260px; height: 260px;" />
            </el-form-item>

          </template>

        </template>

        <el-form-item>
          <el-button type="primary" @click="submit">确认发放</el-button>
        </el-form-item>
      </el-form>
    </u-page>

  </div>
</template>

<script>
import uesMember from '@/components/member/uesMember'
import uesCoupon from '@/components/coupon/uesCoupon'
export default {
  components: {
    uesCoupon,
    uesMember
  },
  data() {
    return {
      api: this.$u.api.MarketCouponSendmanually,
      // 会员选择器弹窗状态
      dialogMemberChoose: false,
      dataForm: {
        // 类型
        type: 1,
        couponId: '',
        // 选中的优惠券
        couponChooseList: [],
        // 选中的会员
        memberIds: '',
        // 异常订单号
        oldOrderNo: '',
        // 备注消息
        note: ''
      },
      // 验证规则
      rules: {
        couponId: [
          { required: true, message: '请选择优惠券', trigger: ['blur'] }
        ],
        memberIds: [
          { required: true, message: '请选择会员', trigger: ['blur'] }
        ]
      },
      // 二维码链接
      qrcode: ''
    }
  },
  methods: {
    // 监听优惠券列表
    changeCouponList(list) {
      this.dataForm.couponChooseList = list
    },
    // 确认发放
    submit() {
      // 验证数据格式
      const { type, couponChooseList } = this.dataForm

      // 获取发送优惠券信息
      this.dataForm.couponList = couponChooseList.map(item => { return { id: item.id, num: item.num } })

      const self = this

      // 效验数据格式
      self.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          // 模态对话框组件
          self.$confirm('此操作将发放优惠券，是否继续？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
            const d = self.$u.deepClone(self.dataForm)
            delete d.couponChooseList
            console.log(d)
            // 提交数据
            self.api.submit(d).then(res => {
              // 初始化数据
              self.dataForm = {
                type: type,
                couponChooseList: [],
                memberIds: '',
                oldOrderNo: '',
                note: '',
                couponId: ''
              }
              self.$refs.uesCoupon.reset()
              // 通知信息
              self.$u.msg('发放优惠券成功')

              if (type === 2) {
                const { qrcode } = res.data
                self.qrcode = qrcode
              }
            })
          }).catch(() => {
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .form-title {
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    padding: 9px 20px;
    background-color: #f4f4f5;
  }
</style>
